<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<title>Page Title | Yoursite.com</title>

	<meta name="keywords" content="keyword phrase 1, keyword phrase 2" />
	<meta name="description" content="inHarmony is a perfect corporate html template." />
	
	<link rel="Shortcut Icon" type="image/ico" href="imgs/favicon.ico" />
	
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	
	<!-- CSS _____________________________________________-->
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/magnificpopup.css" >
	<link rel="stylesheet" href="css/font-awesome.min.css">
	
	<link href="css/master.css" rel="stylesheet">
	<link href="css/colors-classic.css" rel="stylesheet">   <!-- The color scheme -->
	
	<!-- Javascripts _____________________________________________-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
		<!-- include image popups -->
		<script src="js/jquery.magnific-popup.min.js"></script> 
		<!-- include mobile menu -->
		<script src="js/jquery.mobilemenu.js"></script> 
		<!-- include custom script -->
		<script src="js/scripts.js"></script>
	
	<!-- Fixing Internet Explorer ______________________________________-->
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<link rel="stylesheet" href="css/ie.css" />
	<![endif]-->

	<!--[if IE 7]>
		<link rel="stylesheet" href="css/ie7.css" />
		<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
	<![endif]-->
</head> 

<body class="page full">

<div id="wrapperbox">

	<!-- HEADER _____________________________________________-->
	<header role="banner">
		<div class="wrapper">
			<!-- Logo ______________________________________-->
			<div id="logo">
				<h1>
					<a href="/" rel="home"><img src="imgs/logo.gif" alt="inHarmony Logo" /></a>
					<a href="/" rel="home">inHarmony<span class="blue">.</span></a> <br />
					<span class="subtitle">Just another HTML template</span>
				</h1>
			</div>
			
			<!-- Address Microdata ______________________________________-->
			<div id="address-block" itemscope itemtype="http://schema.org/Organization"> 
			   <span itemprop="name" class="hidden">inHarmony Organization</span> 
			   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
					
				  <span itemprop="streetAddress">2939 4th Ave W</span>,
				  <span itemprop="addressLocality">Vancouver</span>,
				  <span itemprop="postalCode">BC V6K 1R3</span>
			   </div>
			   <span itemprop="telephone"><i class="icon-mobile-phone"></i> <strong>123-456-9999</strong></span> 
			   <a href="mailto:info@yourcompany.com" itemprop="email"><i class="icon-envelope"></i> info@the-company.com</a>
			</div>	
			
			<!-- Social icons ______________________________________-->
			<div id="social-block">
				<ul>
					<li><a href="#" target="_blank" title="Twitter"><i class="icon-twitter"></i></a></li>
					<li><a href="#" target="_blank" title="Facebook"><i class="icon-facebook"></i></a></li>
					<li><a href="#" target="_blank" title="Linkedin"><i class="icon-linkedin"></i></a></li>
					<li><a href="#" target="_blank" title="Pinterest"><i class="icon-pinterest"></i></a></li>
					<li><a href="#" target="_blank" title="Google Plus"><i class="icon-google-plus"></i></a></li>
					<!-- 	<li><a href="#" target="_blank" title="Youtube"><i class="icon-youtube"></i></a></li>
					<li><a href="#" target="_blank" title="Dribbble"><i class="icon-dribbble"></i></a></li>
					<li><a href="#" target="_blank" title="Flickr"><i class="icon-flickr"></i></a></li>
					<li><a href="#" target="_blank" title="Tumblr"><i class="icon-tumblr"></i></a></li>
					<li><a href="#" target="_blank" title="Skype"><i class="icon-skype"></i></a></li> -->
				</ul>
			</div>
		</div>  <!-- END .wrapper -->
		
		<!-- Main menu ______________________________________-->
		<nav id="mainmenu" role="navigation">
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="#">Styles</a>
					<ul class="sub-menu" id="change-style">
						<li><a href="#" id="classic">Classic</a></li>
						<li><a href="#" id="eco-earth">Eco Earth</a></li>
						<li><a href="#" id="silver-grey">Silver Grey</a></li>
						<li><a href="#" id="passion-red">Passion Red</a></li>
						<li><a href="#" id="golden">Golden</a></li>
						<li><a href="#" id="deep-blue">Deep Blue</a></li>	
					</ul>
				</li>
				<li><a href="elements.html" class="active">Pages</a>
					<ul class="sub-menu">
						<li><a href="about-us.html">About Us</a></li>
						<li><a href="elements.html" class="active">Elements</a></li>
						<li><a href="team.html">Team</a></li>
						<li><a href="pricing.html">Pricing</a></li>
						<li><a href="testimonials.html">Testimonials</a></li>
						<li><a href="faqs.html">FAQs</a></li>
						<li><a href="404.html">404</a></li>
					</ul>
				</li>
				<li><a href="#">Media</a>
					<ul class="sub-menu">
						<li><a href="portfolio.html">Portfolio</a>
							<ul class="sub-menu">
								<li><a href="portfolio.html">Portfolio Small</a></li>
								<li><a href="portfolio-medium.html">Portfolio Medium</a></li>
								<li><a href="portfolio-large.html">Portfolio Large</a></li>
							</ul>
						</li>
						<li><a href="portfolio-single.html">Portfolio Single</a></li>
						<li><a href="documentation.html">Documentation</a></li>
					</ul>
				</li>
				<li><a href="#">Layouts</a>
					<ul class="sub-menu">
						<li><a href="about-us.html">Left Sidebar</a></li>
						<li><a href="blog-post.html">Right Sidebar</a></li>
						<li><a href="team.html">Full Width</a></li>
					</ul>
				</li>
				
				<li><a href="blog.html">Blog</a>
					<ul class="sub-menu">
						<li><a href="blog-post.html">Blog Post</a></li>
					</ul>
				</li>
				<li><a href="contact.html">Contact</a></li>
			</ul>		

			<!-- Search box ______________________________________-->
			<div id="sitesearch">
				<i class="icon-search"></i>
			</div>
			<div id="search-results">
				<script>
				  (function() {
					var cx = '017683756184911932766:rvnzs1j9m1g';
					var gcse = document.createElement('script');
					gcse.type = 'text/javascript';
					gcse.async = true;
					gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
						'//www.google.com/cse/cse.js?cx=' + cx;
					var s = document.getElementsByTagName('script')[0];
					s.parentNode.insertBefore(gcse, s);
				  })();
				</script>
				<div id="search-box">
					<div class="gcse-search"></div>
				</div>
			</div>
			
		</nav> <!-- END #mainmenu -->		
	</header>
			
	<div class="wrapper">
		<div id="content" role="main">
			<!-- Heading _____________________________________________-->
			<h1>Elements</h1>
			
			<!-- Breadcrumbs _____________________________________________-->
			<p itemscope itemtype="http://data-vocabulary.org/Breadcrumb" id="breadcrumbs"><a href="/" rel="home" itemprop="url"><span itemprop="title">Home</span></a> <i class="icon-chevron-right"></i> <a href="elements.html" itemprop="url"><span itemprop="title">Pages</span></a> <i class="icon-chevron-right"></i> Elements</p>
			<hr />
			
			<!-- WYSIWYG Content _____________________________________________-->
		
		<div class="p100">
			<!-- Accordion ------------------>
			<div class="p25">
				<h2>Accordion style 1</h2> 
				<br />
				<div class="accordion accordion-style1">
				 	<h3 class="accordion-title"><a href="#">Accordion 1 Title</a></h3>
				 	<div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
					</p></div>
				 
				 	<h3 class="accordion-title"><a href="#">Accordion 2 Title</a></h3>
				 	<div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
					</p></div>

					<h3 class="accordion-title"><a href="#">Accordion 3 Title</a></h3>
				 	<div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
					</p><p></p></div>
				 </div><!-- END .accordion -->
			</div><!-- END .p25 column -->	

			<div class="p25">
				<h2>Accordion style 2</h2> 
				<br />
				<div class="accordion accordion-style2">
				 	<p class="accordion-title"><a href="#">Accordion 1 Title</a></p>
				 	<div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
					</p></div>
				 
				 	<p class="accordion-title"><a href="#">Accordion 2 Title</a></p>
				 	<div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
					</p></div>

					<p class="accordion-title"><a href="#">Accordion 3 Title</a></p>
				 	<div><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
					</p><p></p></div>
				 </div><!-- END .accordion -->
			</div><!-- END .p25 column -->	

			<!-- Tabs HORIZONTAL ------------------>
			<div class="p25">
				<h2>Tabs horizontal</h2> 
				<br />
				<div class="horizontal-tabs tabs-wrapper">
					<ul class="tabs">
					    <li><a href="#" id="tab1">Tab 1</a></li>
					    <li><a href="#" id="tab2">Tab 2</a></li>
					    <li><a href="#" id="tab3">Tab 3</a></li>
					</ul>
					<div class="tab tab1">
					 	<h3>Tab 1 Title</h3>
					 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
						</p>
					</div>
					<div class="tab tab2">
					 	<h3>Tab 2 Title</h3>
					 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
						</p>
					</div>
					<div class="tab tab3">
					 	<h3>Tab 3 Title</h3>
					 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type.
						</p>
					</div>	
				</div> <!-- END .vertical-tabs -->	
			</div><!-- END .p25 column -->	

			<!-- Tabs VERTICAL ------------------>
			<div class="p25">
				<h2>Tabs vertical</h2> 
				<br />
				<div class="vertical-tabs tabs-wrapper">
					<ul class="tabs">
					    <li><a href="#" id="tab4">Tab 1</a></li>
					    <li><a href="#" id="tab5">Tab 2</a></li>
					    <li><a href="#" id="tab6">Tab 3</a></li>
					</ul>
					<div class="tab tab4">
					 	<h3>Tab 1 Title</h3>
					 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
						</p>
					</div>
					<div class="tab tab5">
					 	<h3>Tab 2 Title</h3>
					 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
						</p>
					</div>
					<div class="tab tab6">
					 	<h3>Tab 3 Title</h3>
					 	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
						</p>
					</div>	
				</div> <!-- END .vertical-tabs -->	
			</div><!-- END .p25 column -->	

			<!-- Alert Boxes ------------------> 
			<div class="p25 clear"> 
				<h2>Alert Boxes</h2>
				<br />
				<p class="notice error"><strong>Error</strong> – Your message! </p>
				<p class="notice success"><strong>Success</strong> – Your message! </p>
				<p class="notice info"><strong>Info</strong> – Your message!</p>
				<p class="notice"><strong>Notice</strong> – Your message! </p>
			</div><!-- END .p25 column -->

			<!-- Buttons ------------------>
			<div class="p25">
				<h2>Buttons</h2> 
				<br />
				<p class="smaller-padding"><a href="#" class="button small">Small button</a></p> <br />
				<p class="smaller-padding"><a href="#" class="button big">Big button</a></p> <br />
				<p class="smaller-padding"><a href="#" class="button">Standard</a></p> 
		
			</div><!-- END .p25 column -->
			<div class="p25">
				<h2>Colorful Buttons</h2> 
				<br />
				<p class="smaller-padding"><a href="#" class="button green small">Green</a> </p>
				<p class="smaller-padding"><a href="#" class="button green2 small">Green 2</a></p>
				<p class="smaller-padding"><a href="#" class="button orange small">Orange</a></p>
				<p class="smaller-padding"><a href="#" class="button darkblue small">Dark Blue</a></p>
				<p class="smaller-padding"><a href="#" class="button blue small">Blue</a> &nbsp; <a href="#" class="button pink small">Pink</a></p>
				<p class="smaller-padding"><a href="#" class="button black small">Black</a>  &nbsp; <a href="#" class="button grey small">Grey</a></p> 
				
			</div><!-- END .p25 column -->


			<!-- Info box ------------------>
			<div class="p25">
				<h2>Info Box</h2> 
				<br />
				<div class="greybox">     
					<h3>My info box</h3>
					<p class="grey">Donec vitae lacus sed risus accumsan consectetur ut a ligula. Etiam vitae nisi diam, in rutrum dui eget varius nulla lacus ut erat.</p>
					<p><a href="#" class="button">Click it</a></p>
				</div>
			</div><!-- END .p25 column -->

			<!-- List styles ------------------>
			<div class="p25 clear">
				<h2>List Styles</h2>
				<br />
				<ul class="arrow">
					<li>Arrow List – Aenean nisl orci</li>
				</ul>
				<ul class="tick">
					<li>Tick List – Aenean nisl orci</li>
				</ul>
				<ul class="user">
					<li>User List – Aenean nisl orci</li>
				</ul>
				<ul class="plus">
					<li>Plus List – Aenean nisl orci</li>
				</ul>
				<ul class="thumbs-up">
					<li>Thumbs up List – Aenean nisl orci</li>
				</ul>
				<ul class="ok">
					<li>OK List – Aenean nisl orci</li>
				</ul>
				<ul class="star">
					<li>Star List – Aenean nisl orci</li>
				</ul>
				<ul class="smiley">
					<li>Smiley List – Aenean nisl orci</li>
				</ul>
			</div><!-- END .p25 column -->


			<!-- Blockquote ------------------>
			<div class="p50">
				<h2>Blockquotes</h2> 
				<br />
				<div class="quote">
					<blockquote>
						<p>“Men want to be with women who challenge them, who push them, and who take the lead some of the times. It’s that attitude, that sassiness, that confidence, that charisma, that charm that shows she can be a little bold and little daring.”</p>
					</blockquote>
					<footer>
						<img src="imgs/quote-author.jpg" alt="Author" />
						<small class="author">J.R. Simmons, CEO of Company</small>
					</footer>
				</div>
				
				<article>
					<blockquote>
						<p>“WOW! Amazing template! Thank you for all the hard work you put into its simplicity and ease of use. Thanks again!”</p>
					</blockquote>
					<small class="author small right grey">Jean Perry, San Francisco</small>
				</article>
			</div><!-- END .p25 column -->


			<!-- Icon box ------------------>
			<div class="p25">
				<h2>Icon boxes</h2>
				<br />
				<div>
					<div class="p20 left"><i class="icon-desktop extrabig blue"></i></div> 
					<div class="p70">
						<h3><a href="#">350 Icons</a></h3>
						<p>Create these scalable boxes with any icon from Font Awesome icon set.</p> 
					</div>
				</div>  
				<p class="clear"></p>
				<div class="center">
					<p class="smaller-padding"><i class="icon-food extrabig blue"></i></p> 
					<h3><a href="#">350 Icons</a></h3>
					<p>Create these scalable boxes with any icon from Font Awesome icon set.</p> 
				</div> 
			</div><!-- END .p25 column -->

		</div><!-- END .p100 column -->
			<!-- END of WYSIWYG content _____________________________________________-->
			
			<div class="clear"></div>
			  
		</div> <!-- END .content -->
	</div> <!-- END .wrapper -->
			
	<!-- Footer _____________________________________________-->
	<footer role="contentinfo" id="footer">
		<div class="wrapper">
			<div class="footerbox">
				<h3>About Us</h3>
				<p>We create awesome HTML and WP themes and templates for your great online presence. We also provide support if you get any issues on our items. Check it out!</p>
				<br />
				<p><a href="http://themeforest.net/user/Darinka?ref=Darinka" target="_blank" class="button">BUY THIS</a></p>
			</div> <!-- END .footerbox -->
		
			<div class="footerbox">
				<h3>Latest News</h3>
				<ul>
					<li>
						<i class="icon-file-text"></i> 
						<h4><a href="blog-post.html">Single Clean Post</a></h4>
						<p class="small"><strong>Aug 3</strong> / admin </p>
					</li>
					<li>
						<i class="icon-file-text"></i> 
						<h4><a href="blog-post.html">Our Blog Revived!</a></h4>
						<p class="small"><strong>Aug 3</strong> / Darinka </p>
					</li>
					<li>
						<i class="icon-file-text"></i> 
						<h4><a href="blog-post.html">New Site Out Tomorrow</a></h4>
						<p class="small"><strong>Aug 3</strong> / admin </p>
					</li>
				</ul>
			</div> <!-- END .footerbox -->
			
			<div class="footerbox">
				<h3>Events</h3>
				<ul>
					<li>
						<i class="icon-calendar"></i> 
						<h4><a href="event.html">Open Klasses</a></h4>
						<p class="small"><strong>Aug 3</strong> / Street Art 2013 </p>
					</li>
					<li>
						<i class="icon-calendar"></i> 
						<h4><a href="event.html">Summer Party</a></h4>
						<p class="small"><strong>Aug 10</strong> / Best place to party! </p>
					</li>
					<li>
						<i class="icon-calendar"></i> 
						<h4><a href="event.html">Charity Event</a></h4>
						<p class="small"><strong>Aug 12</strong> / Help find the cure!</p>
					</li>
				</ul>
			</div> <!-- END .footerbox -->
			
			<div class="footerbox last">
				<h3>Our newsletter</h3>
				<form method="post" action="#">
					<p>Sign up now to receive weekly news about new products and great discounts!</p>
					<p><label for="email">Your e-mail address</label> <input type="text" id="email" value="" /></p>
					<p><button type="submit">Subscribe</button></p>
				</form>
			</div> <!-- END .footerbox -->
			<div class="clear"></div>

			<hr />
			<p class="left small">Copyright &copy; 2013 Your Company Name. <br />All rights reserved.</p>
			<ul class="footermenu">
				<li><a href="#">Home</a></li>
				<li><a href="#">Styles</a></li>
				<li><a href="#">Pages</a></li>
				<li><a href="#">Media</a></li>
				<li><a href="#">Layouts</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Contact</a></li>
			</ul> <!-- END .footermenu -->
			<div class="clear"></div>
		</div>  <!-- END .wrapper -->
	</footer>
</div> <!-- END #wrapperbox -->
<br class="clear" />

	
	<!-- Your Google Analytics _____________________________________________-->
	<script type="text/javascript">
	
		  var _gaq = _gaq || [];
		  _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
		  _gaq.push(['_trackPageview']);
		
		  (function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		  })(); 
	
	</script>
</body>
</html>
